<template>
  <div>
    <!-- <div id="home-body"> -->
        <div class="total-info">
            <div class="left-info">
                <a @click="showDialog" >
                    <div class="year">
                        {{year}}年
                    </div>
                    <div class="month">
                        {{month.length>1?month:'0'+month}}
                    </div>
                    <div style="color:white;font-size: 26px;display: inline-block;">
                        月
                    </div>
                </a>
            </div>
            <div class="middle-info">
                <div class="year">
                    收入
                </div>
                <div class="month" style='font-size: 25px;margin-top: 3vh;'>
                    {{toFixed_month_get_price}}
                </div>
            </div>
            <div class="right-info">
                <div class="year">
                    支出
                </div>
                <div class="month" style='font-size: 25px;margin-top: 3vh;'>
                    {{toFixed_month_pay_price}}
                </div>
            </div>
        </div>
    <!-- </div> -->
    <div class="Monthly-body">
        <div v-show="!hasData">
        <div  class="noData">
            <img src="./images/暂无数据.png" >
        </div>
        <div class="font_noData">
            暂无数据
        </div>
    </div>
        <MonthlyCommit v-for="day in monthlyCommit" :day="day"  :key="day.date" :showUpdateDialog="showUpdateDialog" ></MonthlyCommit>
    </div>
        <div class="add">
            <a><img @click="addBill" src="./images/添加.png"></a>
        </div>
	  <MyDialog :showDialog="isShowDialog"  v-on:closeMyDialog='closeDialog' ></MyDialog>
      <UpdateDialog :showUpdateDialog="isShowUpdateDialog"  v-on:closeUpdateDialog='closeUpdateDialog' ></UpdateDialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import MyDialog from './MyDialog';
import MonthlyCommit from './MonthlyCommit/index.vue';
import UpdateDialog from './UpdateDialog';
export default {
    name:'HomePage',
    components:{ MyDialog, MonthlyCommit,UpdateDialog },
    methods: {
		showDialog: function(){
			this.isShowDialog = true;
		},
        closeDialog(){
            this.isShowDialog = false;
        },
        closeUpdateDialog(){
            this.isShowUpdateDialog = false;
        },
        showUpdateDialog(){
            this.isShowUpdateDialog = true;
        },
        addBill:function(){
            this.$router.push('/userAdd/userPay');
        }
	},
	
	data: function(){
		return {
			isShowDialog: false,
            isShowUpdateDialog: false,
		}
	},

    computed:{
        ...mapState('HomePage',['month','year','monthlyCommit']),
        ...mapGetters('HomePage',['toFixed_month_pay_price','toFixed_month_get_price','hasData']),
    },

    mounted() {
        this.$store.dispatch('HomePage/getInfo',{year:this.year,month:this.month});
        this.$bus.$on('showUpdateDialog',this.showUpdateDialog);
    },
    beforeDestroy(){
        this.$bus.$off(['showUpdateDialog']);
    }
}
</script>

<style>
* {
        margin: 0;
        padding: 0;
    }
    
    #home-body {
        height: 85vh;
        width: 100%;
        background: yellow;
    }
    
    .total-info {
        height: 20vh;
        background-color: royalblue;
        overflow: hidden;
    }
    
    .left-info {
        margin-left: 2vw;
        margin-top: 5vh;
        width: 33vw;
        height: 10vh;
        border-right: solid 2px white;
        float: left;
    }
    
    .year {
        color: white;
        width: 100%;
        font-size: 20px;
        text-decoration: none;
    }
    
    .month {
        color: white;
        width: 40%;
        font-size: 40px;
        margin-top: 5px;
        display: inline-block;
    }
    
    .middle-info {
        margin-top: 5vh;
        margin-left: 3vw;
        width: 29vw;
        height: 10vh;
        float: left;
    }
    
    .right-info {
        margin-top: 5vh;
        margin-left: 3vw;
        width: 29vw;
        height: 10vh;
        float: left;
    }

    .Monthly-body{
        height: 74vh;
        overflow: auto;
    }

    .noData{
        width: 200px;
        height: 200px;
        margin-left: 25vw;
        margin-top: 10vh;
    }
    
    .font_noData{
        width: 200px;
        height: 200px;
        margin-left: 25vw;
        text-align: center;
        color: #dbdbdb;
        font-size: 20px;
    }
    .add{
        position: absolute;
        right: 4vw;
        bottom:9vh;
    }
    .add img{
        width: 15vw;
    }
</style>